import {TreeGridNodes} from "trilobita-d/control/TreeGridNodes";

export class TreeGrid extends React.Component{

  treeViewElement=(ds)=>{
      return <span>{ds.name}</span>
  }

 bodyOnScroll=(e)=>{
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();

    this.header.scrollLeft=e.target.scrollLeft;

    this.lock.style.left=e.target.scrollLeft+"px";
    this.scrollLeft=e.target.scrollLeft;

 }
 
 addNode=(item,subdata)=>{
   if(this.locktreeview){
     this.locktreeview.addNode(item,subdata);
   }
   this.treeview.addNode(item,subdata);
 }

 deleteItem=(item)=>{
   if(this.locktreeview){
     this.locktreeview.deleteItem(item);
   }
   this.treeview.deleteItem(item);
 }

 checkBoxSuport=(bl)=>{
   if(this.locktreeview){
     this.locktreeview.checkBoxSuport(bl);
   }
   this.treeview.checkBoxSuport(bl);
 }

 updateNode=(item)=>{
   if(this.locktreeview){
     this.locktreeview.updateNode(item);
   }
   this.treeview.updateNode(item);
 }

 getSelected=()=>{
   return this.selectedItem;
 }

 getTree=()=>{
   return this.treeview;
 }

 flush=()=>{
   this.setState({load:true});
 }

 lockclo=(clonum)=>{
   let clomn=[];
   for(let i=0;i<clonum;i++ ){
      clomn.push(this.props.cloumn[i]);
   }
   return {header:(
      <div  className="lock header">
                     {
                           clomn.map((f) =>{
                             return <span className="col" style={{display:"inline-block",minWidth:f.width}}>{f.title}</span>;
                           })
                     }
         </div>),
         body:(
         <div className="lock body" ref={r=>this.lock=r}>
         <TreeGridNodes ref={
          (r)=>{
            this.locktreeview=r;
          }
        } action="action2" joinAction="action1,action2" treeCol={this.props.treeCol} cloumn={clomn} dataSource={this.props.dataSource} itemClick={(e,ds)=>{
            this.selectedItem=ds;
            console.log(this.selectedItem);
        }} map={this.props.map}/>
         </div>
       )}
 }

 render(){
      const {header,body}=this.lockclo(this.props.lockclo);
      let dataSource=[];
      this.props.dataSource.map(item=>dataSource.push(item));
      return  (<div className="treegrid" style={{overFlow:'auto'}}>
           <div className="header" ref={r=>this.header=r}>
                       {
                             this.props.cloumn.map((f) =>{
                               return <span className="col" style={{display:"inline-block",minWidth:f.width}}>{f.title}</span>;
                             })
                       }
                      {header}
           </div>
           <div className="body" onScroll={this.bodyOnScroll}>
           <TreeGridNodes ref={
            (r)=>{
              this.treeview=r;
            }
          } action="action1" joinAction="action1,action2" renderTreeNode={this.treeViewElement}  treeCol={this.props.treeCol} cloumn={this.props.cloumn} dataSource={this.props.dataSource} itemClick={(e,ds)=>{
              this.selectedItem=ds;
              console.log(this.selectedItem);
             //  console.log("选择ID",this.treeview.getGroupIds(this.selectedItem));
          }} map={this.props.map}/>
            {body}
           </div>

       </div>)
     }
}
